<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页布局示例</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif; /* 设置字体 */
  }

  /* 使用 Flexbox 实现布局 */
  .flex-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .flex-item {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    text-align: center;      /* 文字居中 */
  }

  #header {
    background-color: #f30f0f;
    color: rgb(12, 244, 12);
    padding: 10px;
    font-size: 24px;
  }

  #main {
    flex: 1;
    background-color: #47f60d;
    padding: 20px;
  }

  #footer {
    background-color: #2b15f5;
    color: rgb(12, 250, 20);
    padding: 10px;
    font-size: 16px;
  }

  /* 使用 Grid 实现布局 */
  .grid-container {
    display: grid;
    grid-template-rows: auto 1fr auto; /* 定义三行，头部占一行，主体占两行，尾部占一行 */
    grid-template-columns: 100%; /* 定义一列 */
    height: 100%;
  }

  .grid-item {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    text-align: center;      /* 文字居中 */
  }

  #header-grid {
    background-color: #fc7608;
    color: rgb(223, 116, 116);
    padding: 10px;
    font-size: 24px;
  }

  #main-grid {
    background-color: #e810b9;
    padding: 20px;
  }

  #footer-grid {
    background-color: #333;
    color: rgb(11, 198, 244);
    padding: 10px;
    font-size: 16px;
  }
</style>
</head>
<body>

<!-- Flexbox 布局 -->
<div class="flex-container">
  <div id="header" class="flex-item">头部内容</div>
  <div id="main" class="flex-item">主体内容</div>
  <div id="footer" class="flex-item">尾部内容</div>
</div>

<!-- Grid 布局 -->
<div class="grid-container">
  <div id="header-grid" class="grid-item">头部内容</div>
  <div id="main-grid" class="grid-item">主体内容</div>
  <div id="footer-grid" class="grid-item">尾部内容</div>
</div>

</body>
</html>
